<template>
  <div class='container'>
    <template>
      <el-form ref="form" :model="queryParams" label-width="80px">
        <el-row :gutter="20">

          <div class="left">
            <!--  -->
            <el-col :span="8">
              <el-form-item label="学科名称">
                <el-input v-model="queryParams.subjectName" style="width:250px">1</el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-button @click="queryParams.subjectName=''">清除</el-button>
              <!--  -->
              <el-button type="primary" @click="loadList">搜索</el-button>
            </el-col>
          </div>
          <div class="right" style="height:30px">
            <el-col :span="6">
              <!-- <el-button type="success" size="small" @click="showDialog=true">新增学科</el-button> -->
              <el-button class="filter-item fr" size="small" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handlechange('add')">新增学科</el-button>
              <!-- <el-button type="success" @click="dialogFormVisible = true">
                <i class="el-icn-eodit"></i>新增目录 -->
            </el-col>
          </div>
          <!-- --------------------------------------------------------------------------------- -->
        </el-row>
      </el-form>
      <el-alert type="info">
        <i class="el-icon-info"></i>
        数据一共{{total}}条
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="100">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="100">
        </el-table-column>
        <el-table-column label="创建日期">
          <template v-slot='{row}'>
            {{$dateFormat(row.addDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="120">
          <template v-slot='{row}'>
            <span v-if="row.isFrontDisplay===0">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="80">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="50">
        </el-table-column>
        <el-table-column prop="id" label="题目数量" width="50">
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template v-slot="{row}">
            <!--  @click="$router.push('/subjects/directorys') -->
            <el-button type="text" size="small" @click="$router.push('/subjects/directorys')">学科分类</el-button>
            <el-button type="text" size="small" @click="$router.push('/subjects/tags')">学科标签</el-button>
            <el-button type="text" size="small" :underline="false" @click="handlechange(row.id)">修改</el-button>
            <!-- 删除按钮 -->
            <el-button size="small" @click="handleClick(row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination @current-change="handleCurrentChange" :current-page="queryParams.page" :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <subjects-add :showDialog.sync="showDialog" @on-success="flist" :id="data.id"></subjects-add>
  </div>

</template>

<script>
// import moment from 'moment'
import { list, remove } from '@/api/hmmm/subjects'
import SubjectsAdd from '@/module-hmmm/components/subjects-add.vue'
import { update } from '@/api/base/menus'
export default {
  components: { SubjectsAdd },
  name: 'Subjects',
  data () {
    return {
      form: {
        subjectName: '',
        isFrontDisplay: ''
      },
      showDialog: false,
      // subjectname: '',
      tableData: [],
      data: {
        id: 0
      },
      row: {},
      total: 0,
      // page: 0,
      // pageSize: 0,
      // pages: [],
      addDate: '',
      isFrontDisplay: '',
      queryParams: {
        page: 1,
        pageSize: 10,
        // keyword: '',
        subjectName: ''
      },
      forms: {}
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    // 展示数据
    async loadList () {
      try {
        const rep = await list(this.queryParams)
        // console.log(rep.data)
        this.tableData = rep.data.items
        this.total = rep.data.counts
        // console.log(this.total)
        this.page = rep.data.page
        this.pageSize = rep.data.pageSize
        // this.pages = rep.data.pages

        // this.list = rep.data.items
      } catch (e) {
        this.$message.error('获取失败')
        // console.log(e)
      }
    },
    async handlechange (id) {
      if (id === 'add') {
        this.data.id = 0
        this.showDialog = true
      } else {
        this.data.id = id
        this.showDialog = true
      }
      // return ret.data
      // this.formData = ret.dat
      // console.log(ret)
    },
    flist () {
      this.loadList()
    },
    // 分页
    // 分页
    handleCurrentChange (page) {
      this.queryParams.page = page
      this.loadList()
    },
    // handleSizeChange (pageSize) {
    //   console.log(`每页${pageSize}条`)
    // },
    // 删除
    async handleClick (row) {
      // console.log(row)
      const ret = await this.$confirm('确认要删除吗？是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 点击取消操作
      if (ret === 'cancel') return
      // 点击确定操作
      try {
        const ret = await remove(row)
        if (ret.status === 200) {
          // 删除成功；刷新列表
          this.loadList()
          this.$message.success('删除成功')
        }
      } catch {
        this.$message.error('删除失败')
      }
    },
    // 修改传参我的
    // async handleUpdate (row) {
    //   // 显示弹窗
    //   this.showDialog = true
    //   const ret = await update(row)

    //   // this.forms = row
    //   console.log(ret)
    //   // 刷新列表
    //   // this.loadList()
    // }
    // 修改
    async handleUpdate (row) {
      // 显示弹窗
      this.showDialog = true
      // 接口
      const ret = await update(row)
      console.log(ret)
      this.forms = row
      // 刷新列表
      this.loadList()
    }
    // async loadList () {
    //   try {
    //     const ret = await list(this.queryParams)
    //     console.log(ret)
    //     this.list = ret.data.items
    //   } catch (e) {
    //     this.$message.error('获取失败')
    //     console.log(e)
    //   }
  }

}

</script>
<style scoped>
.left {
  /* float: left; */
  padding-left: 20px;
}
.right {
  float: right;
  padding-right: 20px;
}
.block {
  float: right;
  margin-top: 20px;
}
</style>
